<template>
	<div>
		<el-row :gutter="24">
			<el-col :span="2">
				<p class="queryLabel">编号或名称:</p>
			</el-col>
			<el-col :span="5">
				<el-input v-model="inputsearch" size="small" placeholder="请输入内容"></el-input>
			</el-col>
			<el-col :span="2">
				<el-button type="primary" size="small" @click="quesClassquery">搜索</el-button>
			</el-col>
			<el-col :span="15" style="text-align: right;margin-left: -10px;">
				<el-button type="primary" size="small" @click='quesClassAdd'>新增</el-button>
				<el-button type="primary" size="small" @click.native.prevent="quesClassEdit">编辑</el-button>
				<el-button type="primary" size="small" @click.native.prevent="startquesClass">启用</el-button>
				<el-button type="primary" size="small" @click.native.prevent="stopquesClass">停用</el-button>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<el-table ref="multipleTable" :data="tableData.dataList" @selection-change="handleSelectionChange" style="width: 100%">
					<el-table-column type="selection" width="55">
					</el-table-column>
					<el-table-column prop="groupCode" label="分类编号">
					</el-table-column>
					<el-table-column prop="groupName" label="分类名称">
					</el-table-column>
					<el-table-column prop="dispOrder" label="显示顺序">
					</el-table-column>
					<el-table-column prop="status" label="状态" :formatter="timeFormates">
					</el-table-column>
				</el-table>
				<el-pagination small @current-change="handleCurrentChange" :current-page="CurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="tableData.total">
				</el-pagination>
			</el-col>
		</el-row>
		<el-dialog v-model="dialogform">
			<el-form :model="dataFormModelData" label-width="100px" ref="datamodelForm" :rules="modelRule">
				<el-form-item label="分类编号:" prop="groupCode">
					<el-input size="small" v-model="dataFormModelData.groupCode"></el-input>
				</el-form-item>
				<el-form-item label="分类名称:" prop="groupName">
					<el-input size="small" v-model="dataFormModelData.groupName"></el-input>
				</el-form-item>
				<el-form-item label="显示顺序:" prop="dispOrder">
					<el-input-number v-model="dataFormModelData.dispOrder" :min="1" :max="999999"></el-input-number>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="quesClasssave">提交</el-button>
				<el-button @click="dialogform = false">关闭</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
export default {
	data() {
		return {
			dialogform: false,
			//页码数
			CurentPage: 1,
			page: this.page,
			//分组数据
			tableData: {
				total: 0,
				dataList: []
			},
			selectvalue: '', //流失选择框的选择值
			dialogform: false,
			//表单初始值
			emptyData: {
				id: '',
				groupCode: '', //分类编号
				groupName: '', //分类名称
				dispOrder: '', //排序
				status: '1'
			},
			//表单数据
			dataFormModelData: {
				id: '',
				groupCode: '', //分类编号
				groupName: '', //分类名称
				dispOrder: '', //排序
				status: '1'
			},
			//校验规则：
			modelRule: {

				groupCode: [{
					required: true,
					message: '请输入分类编号',
					trigger: 'blur'
				}],
				groupName: [{
					required: true,
					message: '请输入分类名称',
					trigger: 'blur'
				}],
			},
			inputsearch: "",
			formLabelWidth: '120px',
			selectarr: []
		}
	},
	methods: {
		handleCurrentChange: function (currentPage) {

			this.$data.CurentPage = currentPage;
			this.quesClassquery();
		},
		//查询
		quesClassquery: function () {
			this.$http({
				method: 'GET',
				url: this.API_ROOT + '/crm/base/survery/group/page', //url
				params: { //发送的参数
					groupCode: this.$data.inputsearch, //输入框
					start: this.$data.CurentPage, //页码
					limit: this.$data.page.pageSize //每页的数量
				}
			}).then(function (resp) {

				resp.data.total = parseInt(resp.data.total);
				// es5写法
				this.$data.tableData = resp.data;
			}, function (error) {
				// error
			})

		},
		//新增
		quesClassAdd: function () {
			this.$data.dataRoleFormData = Object.assign(this.$data.dataFormModelData, this.$data.emptyData);
			this.$data.dialogform = true;
		},
		//保存
		quesClasssave: function () {
			this.$refs.datamodelForm.validate(function (valid) {
				if (valid) {
					this.$http.post(this.API_ROOT + '/crm/base/survery/group/save', this.$data.dataFormModelData)
						.then(resp => {

							if (resp.data.success) {

								this.$message(resp.data.msg);
								this.quesClassquery();
								this.$data.dialogform = false;
							} else {
								this.$message.error(resp.data.msg);
							}
						}, resp => {

						});
				}
				return false;
			}.bind(this));
		},
		//编辑
		quesClassEdit: function () {
			if (this.$data.selectarr.length == 1) {

				this.$http({
					method: 'GET',
					url: this.API_ROOT + '/crm/base/survery/group/info', //url
					params: { //发送的参数
						id: this.$data.selectarr[0].id, //查询条件
					}
				}).then(function (resp) {
					this.$data.dialogform = true;
					this.$data.dataFormModelData = resp.data.data;
				}, function (error) {
					// error
				})
			} else {
				this.$message.error("请选择数据")
			}
		},
		//启用
		startquesClass: function () {
			if (this.$data.selectarr.length == 1) {

				this.$http({
					method: 'GET',
					url: this.API_ROOT + '/crm/base/survery/group/start', //url
					params: { //发送的参数
						id: this.$data.selectarr[0].id, //查询条件
					}
				}).then(function (resp) {
					this.$message(resp.data.msg);
					this.quesClassquery();
				}, function (error) {
					// error
				})
			} else {
				this.$message.error("请选择数据")
			}
		},
		//停用
		stopquesClass: function () {
			if (this.$data.selectarr.length == 1) {

				this.$http({
					method: 'GET',
					url: this.API_ROOT + '/crm/base/survery/group/stop', //url
					params: { //发送的参数
						id: this.$data.selectarr[0].id, //查询条件
					}
				}).then(function (resp) {
					this.$message(resp.data.msg);
					this.quesClassquery();
				}, function (error) {
					// error
				})
			} else {
				this.$message.error("请选择数据")
			}
		},
		handleSelectionChange: function (value) {
			this.$data.selectarr = value;
			if (this.$data.selectarr.length > 1) {
				this.$message.error("请选择一条数据")
			}
		},
		timeFormates: function (row, column) {
			if (row.status == 0) return "已停用";
			return "已启用";
		}
	},
	created: function () {
		this.quesClassquery();
	}
}
</script>

<style>

</style>